<template>
  <div class="user-management">
    <!-- 顶部操作栏 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="6">
        <el-select v-model="userType" placeholder="全部类型">
          <el-option label="全部类型" value="all"></el-option>
          <el-option label="H5" value="h5"></el-option>
          <el-option label="小程序" value="mini"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="batchExport">批量导出</el-button>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-input
          v-model="searchList.phone"
          placeholder="手机号或联系方式"
          style="width: 150px; margin-right: 10px"
        />
        <el-input
          v-model="searchList.nickname"
          placeholder="昵称"
          style="width: 150px; margin-right: 10px"
        />
        <el-button type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 用户表格 -->
    <el-table :data="userList" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="userId" label="ID" width="80" />
      <el-table-column prop="avatar" label="头像" width="80">
        <template #default="scope">
          <el-avatar 
            :src="scope.row.avatar" 
            :size="40" 
            style="border-radius: 50%;"
          />
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="昵称" width="200" />
      <el-table-column label="OpenID" width="120">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click="showOpenID(scope.row.openid)"
          >
            显示 OpenID
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="绑定手机号" width="120" />
      <el-table-column prop="phone" label="联系方式" width="120" />
      <el-table-column prop="remark" label="备注" width="120" />
      <el-table-column prop="createTime" label="加入时间" width="200" />
      <el-table-column prop="userType" label="身份" width="100">
       <template #default="scope">
    <el-tag 
      type="primary" 
      style="padding: 2px 6px; font-size: 12px;"
    >
      {{ scope.row.userType === 0 ? '买家' : scope.row.userType === 1 ? '卖家' : '买家/卖家' }}
    </el-tag>
  </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click="editUser(scope.row)"
          >
            禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container" style="margin-top: 20px; text-align: right;">
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import httpInstance from '../../utils/http';

// 搜索条件
const searchList = reactive({
  phone: '',
  nickname: ''
});
const userType = ref('all');

// 用户列表数据
const userList = ref([]);

// 分页相关数据
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 页面加载时获取用户列表
onMounted(() => {
  getUserList();
});

// 批量导出
const batchExport = () => {
  ElMessage.info('批量导出功能待实现');
};

// 搜索
const search = () => {
  pageNo.value = 1; // 搜索时重置页码为第一页
  getUserList();
};

// 显示 OpenID
const showOpenID = (openid) => {
  ElMessage.info(`OpenID: ${openid}`);
};

// 编辑用户
const editUser = (user) => {
  ElMessage.info(`编辑用户 ID: ${user.userId}`);
};

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  getUserList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  pageNo.value = val;
  getUserList();
};

// 获取用户列表
const getUserList = async () => {
  try {
    const res = await httpInstance.post(
      `/eduservice/user/getUserPage/${pageNo.value}/${pageSize.value}`,
      searchList
    );
    userList.value = res.data.list;
    total.value = res.data.total;
    console.log(userList.value);
  } catch (error) {
    ElMessage.error('获取用户列表失败');
    console.error(error);
  }
};
</script>



<style scoped>
.user-management {
  padding: 20px;
}
</style>